import React,{useState,useEffect} from 'react'
import { Button, Drawer, Form, Input,Select } from 'antd';
import MyNotification from '../../components/MyNotification/MyNotification';
import { $add,$getOne,$update } from '../../api/adminApi';
import { $list } from '../../api/roleApi';
import UploadImg from './UploadImg';
export default function AddAdmin({open,setOpen,loadList,loginId,setLoginId}) {
    let [roleList,setRoleList]=useState([])
    const loadRoleList=()=>{
        $list().then((data)=>{
            data=data.map((r)=>{
                return{
                    value:r.roleId,
                    label:r.roleName
                };
            });
            setRoleList(data);
        })
    }
    let [form]=Form.useForm()
    let [notiMsg,setNotiMsg]=useState({type:'',description:''})
    useEffect(()=>{
        loadRoleList()
        if(loginId!==0){
            $getOne({loginId}).then(data=>{
                form.setFieldsValue(data)
            })
        }
    },[loginId])
    const onClose = () => {
        clear()
         setLoginId(0)
        setOpen(false)
    }
    const onFinish = (values) => {
        if(loginId){
            $update(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }else{
            $add(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    clear()
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }
      };
      const clear=()=>{
        form.resetFields();
      }
  return (
    <>
    <Drawer title={loginId!=0?"修改账户":"添加账户"} width={500} placement='right' onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    // initialValues={{
                    //     remember: true,
                    // }}
                    onFinish={onFinish}
                    // onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="编号"
                        name="id"
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="账号"
                        name="loginId"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号',
                            },
                        ]}
                        hidden={loginId}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="loginPwd"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                        hidden={loginId}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="姓名"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="电话"
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="头像"
                        name="photo"
                        rules={[
                            {
                                required: true,
                                message: '请选择头像',
                            },
                        ]}
                    >
                        <UploadImg form={form}/>
                    </Form.Item>
                    <Form.Item
                        label="角色"
                        name="roleId"
                        rules={[
                            {
                                required: true,
                                message: '请选择角色',
                            },
                        ]}
                    >
                        <Select
                        options={roleList}
                        ></Select>
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 4,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            {loginId?'修改':'添加'}
                        </Button>
                        <Button onClick={clear} style={{marginLeft:'10px'}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <MyNotification notiMsg={notiMsg}/>
    </>
  )
}
